<!-- 音频播放器 -->
<template>
  <div class="audio-component">
    <audio :src="url" preload ref="audio"></audio>
    <i
      @click="playAudio"
      :class="{
        'el-icon-video-pause': play,
        'el-icon-video-play': !play,
      }"
      size="20"
    ></i>
  </div>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  components: {},
  data() {
    return {
      play: false,
      Audio: null,
    };
  },
  computed: {},
  methods: {
    // 音乐播放
    playAudio() {
      const that = this;
      let { play } = that;
      let Audio = that.$refs.audio;
      if (Audio.readyState === 0) {
        this.$alert("音频文件不存在或已损坏，请联系管理员处理~", "温馨提示", {
          confirmButtonText: "确定",
          showClose: false,
          callback: (action) => {},
        });
        return;
      }
      // that.getAudioList();
      that.play = !that.play;
      if (Audio.paused) {
        // 点击播放
        Audio.play();
      } else {
        // 点击暂停
        Audio.pause();
      }
    },

    // 获取当前页面的audio元素
    // getAudioList(type) {
    //   const that = this;
    //   let audioList = document.querySelectorAll("audio");
    //   const { index } = that;
    //   audioList.forEach((item, idx) => {
    //     if (idx != index) {
    //       item.pause();
    //     }
    //   });
    // },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      let Audio = this.$refs.audio;
      this.Audio = Audio;
      Audio.addEventListener("ended", () => {
        this.play = false;
      });
    });
  },
};
</script>
<style lang='less' scoped>
.audio-component {
  cursor: pointer;
}
.el-icon-video-play:before,
.el-icon-video-pause:before {
  font-size: 50px;
  color: #e6a23c;
}
</style>